/* ------ GENERALI ------ */

body{

    background-color: black ;

    margin: 0;

    margin: 0;

    overflow: hidden

}

html {

    font-family: sans-serif;

}

/* ------ CANVAS ------ */

#canvas{

    border: 5px solid #333;

    display: block;

    margin-left: auto;

    margin-right: auto;

}





/* ------ BARRA IN ALTO ------ */

.header{background: #333}

.header__logo{color:#fff; float:left;display: block;padding:20px;text-decoration: none;}

.header__menu{float:right;margin:0; padding:0;}

.header__menu__item{display: inline-block;}

.header__menu__item a{color:#fff;display: block;padding:20px;text-decoration: none}

.header__menu__item a:hover{background: #000}

.header__icon-bar{display: block;float: right;padding:20px;display: none;}

.header__icon-bar span{display: block;height:3px; width: 30px;background: #fff; margin-bottom: 5px;}



/* ------ REGOLE ------ */

#regole{

    color: white;

    margin-top: 3%;

    font-size: 3.5em;

    width: fit-content;

    height: fit-content;

    margin-left: auto;

    margin-right: auto;

    border: #333 solid 3px;

    background-color: rgb(255, 174, 0);

    text-align: center;

    border-radius: 30px 30px 30px 30px;

    padding: 0 1em 1em 1em;

}

#info_dim{

    color: white;

    margin-top: 3%;

    font-size: 3.5em;

    width: fit-content;

    height: fit-content;

    margin-left: auto;

    margin-right: auto;

    border: #333 solid 3px;

    background-color: rgb(255, 174, 0);

    text-align: center;

    border-radius: 30px 30px 30px 30px;

    padding: 0 1em 1em 1em;

}

#testo{

    font-size: 0.5em;

    margin-bottom: 0;

}

#dimensioni{

    padding-top: 5%;

    padding-bottom: 0%;

    font-size: 0.5em;

    margin-bottom: 0%;

}



#button{

    color: white;

    background-color: rgb(255, 174, 0);

    margin-top: 0%; /*10%*/

    border: #333 solid 3px;

    border-radius: 30px 30px 30px 30px;

    height: fit-content;

    width: fit-content;

    padding: 0.5em;

    font-size: 0.5em;

}

/* ------ PUNTEGGIO ------ */

#punti{

    margin-top: 0.5%;

    margin-bottom: 0.5%;

    color: white;

    position: relative;

    text-align: center;

    font-size: 2em;

    text-decoration: none;

    display: list-item;

}





/* ------ SKIN MENU ------ */

.skin{

    position: fixed;

    transform: translate(-50%, 0);

    margin-top: 5%;

    margin-left: 50%;

    margin-right: auto;

    width: fit-content;

    height: fit-content;

    padding: 0% 2% 2% 2%;

    background-color: #333;

    border-radius: 30px;

}

.skin p{

    text-align: center;

    font-size: 2.5em;

}





/* ------ RIGA 1 ------ */

.riga1

{

    width: fit-content;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 2%;

}

#ball_football{ display: inline-block; }

#ball_basket{ display: inline-block; }

#ball_volley{ display: inline-block; }





/* ------ RIGA 2 ------ */

.riga2

{

    width: fit-content;

    margin-left: auto;

    margin-right: auto;

    margin-top: 1%;

    margin-bottom: 2%;

}

#ball_8{ display: inline-block; }

#ball_baseball{ display: inline-block; }

#ball_golf{ display: inline-block; }





/* ------ RIGA 3 ------ */

.riga3

{

    width: fit-content;

    margin-left: auto;

    margin-right: auto;

    margin-top: 2%;

    margin-bottom: 2%;

}

#ball_tennis{ display: inline-block; }

#ball_select{ display: inline-block; }

#ball_beach{ display: inline-block; }





/* ------ GIF ------ */

#animation{

    position: absolute;

    transform: translate(-50%, 0);

    margin-left: 50%;

    margin-right: auto;

}





/* ------ TIMER ------ */

#tempo{

    border: 4px solid #333;

    padding: 0.5% 0.5% 0% 0.5%;

    padding-top: 0px;

    float: right;

    margin-right: 2%;

    font-size: 250%;

    color: white;

}



/* ------ LOSER ------ */

#lose_box{

    width: fit-content;

    height: fit-content;

    margin-left: 50%;

    margin-right: auto;

    position: fixed;

    transform: translate(-50%, 0);

    margin-top: 15%;

    background-color: #333;

    border-radius: 30px;

}

#lose_text{

    color: white;

    font-size: 2em;

    text-align: center;

    padding: 1em 1em 0em 1em;

    

}

#restart{

    color: white;

    border: 2px solid black;

    background-color: rgb(255, 174, 0);;

    margin-left: 50%;

    margin-right: auto;

    transform: translate(-50%, 0);

    font-size: 2em;

    margin-bottom: 1em;

    border-radius: 30px;

    padding: 0.5em 1em 0.5em 1em;

}